<template>
	<view class="container">
		<view class="stick-placeholder">
			<u-tabs class="u-tabs" item-width="50%" :list="list" :current="current" @change="change"></u-tabs>
		</view>
		<uni-list v-show="current==0" :border="false">
			<uni-list-item v-for="(item,index) in newsList" :key="index">
				<template v-slot:body>
					<router-link class="flex justify-between information-list-item"
						:to="{path:'/pages/newsDetail/newsDetail',query:{info:JSON.stringify(item).replace(/%/g,'%25')}}">
						<view class="flex flex-column justify-between">
							<text class="title">{{item.title}}</text>
							<text class="time">{{item.time}}</text>
						</view>
						<u-image class="item-image" mode="scaleToFill" width="200rpx" height="140rpx"
							border-radius="5rpx" :src="item.pic"></u-image>
					</router-link>
				</template>
			</uni-list-item>
			<uni-load-more :status="newsStatus"></uni-load-more>
		</uni-list>
		<uni-list class="uni-list kuaixun-list" v-show="current==1" :border="false">
			<view class="news-list-item" v-for="(item,index) in informationList" :key="index">
				<view class="flex align-center time-wrapper">
					<view class="dot"></view>
					<view class="line"></view>
					<view class="time">{{item.time.split(" ")[1]}}</view>
				</view>
				<view class="content">{{item.body}}</view>
			</view>

			</uni-list-item>
			<uni-load-more :status="informationStatus"></uni-load-more>
		</uni-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '资讯'
				}, {
					name: '快讯'
				}],
				current: 0,

				informationList: [],
				informationStatus: "more",
				informationCurrentPage: 0,
				informationPageSize: 10,

				newsList: [],
				newsStatus: "more",
				newsCurrentPage: 0,
				newsPageSize: 10,
			};
		},
		methods: {
			change(index) {
				this.current = index;
				if (!this.informationList.length) {
					this.requestImformation()()
				}
			},
			async requestImformation() {
				if (this.informationStatus != "more") {
					return false
				}
				try {
					let res = await this.$u.api.imformationApi({
						page: this.informationCurrentPage + 1,
						row: this.informationPageSize
					})
					this.informationCurrentPage = parseInt(res.page)
					this.informationList = [...this.informationList, ...res.list]
					if (this.informationCurrentPage >= res.page_num) {
						this.informationStatus = "noMore"
					} else {
						this.informationStatus = "more"
					}
				} catch (e) {
					//TODO handle the exception
					this.informationStatus = "more"
				}
			},
			async requestNewsList() {
				if (this.newsStatus != "more") {
					return false
				}
				try {
					let res = await this.$u.api.newsListApi({
						page: this.newsCurrentPage + 1,
						row: this.newsPageSize
					})
					this.newsCurrentPage = parseInt(res.page)
					this.newsList = [...this.newsList, ...res.list]
					if (this.newsCurrentPage >= res.page_num) {
						this.newsStatus = "noMore"
					} else {
						this.newsStatus = "more"
					}
				} catch (e) {
					//TODO handle the exception
					this.newsStatus = "more"
				}
			}
		},
		onReachBottom() {
			console.log("trigger")
			if (this.current == 0) {
				this.requestNewsList()
			} else {
				this.requestImformation()
			}
		},
		onLoad() {
			this.requestNewsList()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.container {
		height: auto;
		background-color: #ffffff;

		.stick-placeholder {
			&::after {
				content: " ";
				height: 90rpx;
				display: block;
			}
		}

		.u-tabs {
			position: fixed;
			left: 0;
			right: 0;
			width: 100%;
			background-color: #fff;
			z-index: 10;

		}

		.uni-list {}

		.kuaixun-list {
			padding-top: 40rpx;
		}

		.list-item {
			padding: 0rpx;
			border: none;

		}

		.time-wrapper {
			position: relative;
			left: -8rpx;
			top: -48rpx;
		}

		.information-list-item {
			width: 100%;

			.title {
				font-size: 30rpx;
				color: #333;
			}

			.time {
				font-size: 24rpx;
				color: #999;
			}

			.item-image {
				margin-left: 50rpx;
				width: 300rpx;
				flex-shrink: 0;
				height: 200rpx;
				border-radius: 5rpx;
			}
		}

		.news-list-item {
			// border-left: 1rpx solid $color-gray;
			border-left: 1rpx solid #eee;
			// padding: 30rpx;
			margin: 0 20rpx 0 50rpx;
			padding: 30rpx 0;

			.dot {
				width: 12rpx;
				height: 12rpx;
				border-radius: 10rpx;
				background-color: $color-blue;
			}

			.line {
				width: 75rpx;
				height: 1rpx;
				background-color: #eee;
			}

			.title {
				font-size: 30rpx;
				color: #333;
			}

			.time {
				padding: 4rpx 10rpx;
				font-size: 24rpx;
				border-radius: 4rpx;
				color: $color-blue;
				background-color: $color-gray;
			}

			.content {
				position: relative;
				left: -4rpx;
				top: -44rpx;

				padding: 20rpx 10rpx 0 85rpx;
				font-size: 28rpx;
				color: #333;
				line-height: 34rpx;
			}
		}
	}
</style>
